// 导入React Vertical Timeline Component库中所需的组件
import {
  VerticalTimeline, // 垂直时间轴主容器组件
  VerticalTimelineElement, // 垂直时间轴单个元素组件
} from "react-vertical-timeline-component";

// 导入自定义组件CTA（通常表示Call To Action）
import { CTA } from "../components";

// 导入常量数据，包括个人经历(experiences)和技能(skills)
import { experiences, skills } from "../constants";

// 引入React Vertical Timeline Component的样式文件
import "react-vertical-timeline-component/style.min.css";

// 定义About组件
const About = () => {
  // 返回React元素，渲染个人介绍、技能展示与工作经历的时间轴
  return (
    <section className='max-container'>

      {/* 标题部分 */}
      <h1 className='head-text'>
        Hello, I'm{" "}
        <span className='blue-gradient_text font-semibold drop-shadow'>
          {" "}
          Mr Bear
        </span>{" "}
        👋
      </h1>

      {/* 简介段落 */}
      <div className='mt-5 flex flex-col gap-3 text-slate-500'>
        <p>前端工程师，通过实践学习和构建应用程序的学习者</p>
      </div>

      {/* 技能展示区域 */}
      <div className='py-10 flex flex-col'>
        <h3 className='subhead-text'>我的技能</h3>

        {/* 技能图标列表 */}
        <div className='mt-16 flex flex-wrap gap-12'>
          {/* 遍历skills数组，为每个技能生成一个卡片 */}
          {skills.map((skill) => (
            <div className='block-container w-20 h-20' key={skill.name}>
              {/* 图标按钮的背景层 */}
              <div className='btn-back rounded-xl' />
              {/* 图标按钮的前景层，包含技能图标 */}
              <div className='btn-front rounded-xl flex justify-center items-center'>
                <img
                  src={skill.imageUrl}
                  alt={skill.name}
                  className='w-1/2 h-1/2 object-contain'
                />
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 工作经历区域 */}
      <div className='py-16'>
        <h3 className='subhead-text'>工作经历</h3>
        {/* 引导性文字 */}
        <div className='mt-5 flex flex-col gap-3 text-slate-500'>
          <p>具体如下:</p>
        </div>

        {/* 时间轴容器 */}
        <div className='mt-12 flex'>
          {/* 垂直时间轴 */}
          <VerticalTimeline>
            {/* 遍历experiences数组，为每个工作经历生成一个时间轴元素 */}
            {experiences.map((experience, index) => (
              <VerticalTimelineElement
                key={experience.company_name}
                date={experience.date}
                // 自定义图标的背景颜色
                iconStyle={{ background: experience.iconBg }}
                // 时间轴点的图标
                icon={
                  <div className='flex justify-center items-center w-full h-full'>
                    <img
                      src={experience.icon}
                      alt={experience.company_name}
                      className='w-[60%] h-[60%] object-contain'
                    />
                  </div>
                }
                // 自定义内容区域样式
                contentStyle={{
                  borderBottom: "8px",
                  borderStyle: "solid",
                  borderBottomColor: experience.iconBg,
                  boxShadow: "none",
                }}
              >
                {/* 经历标题和公司名称 */}
                <div>
                  <h3 className='text-black text-xl font-poppins font-semibold'>
                    {experience.title}
                  </h3>
                  <p
                    className='text-black-500 font-medium text-base'
                    style={{ margin: 0 }}
                  >
                    {experience.company_name}
                  </p>
                </div>

                {/* 经历要点列表 */}
                <ul className='my-5 list-disc ml-5 space-y-2'>
                  {experience.points.map((point, index) => (
                    <li
                      key={`experience-point-${index}`}
                      className='text-black-500/50 font-normal pl-1 text-sm'
                    >
                      {point}
                    </li>
                  ))}
                </ul>
              </VerticalTimelineElement>
            ))}
          </VerticalTimeline>
        </div>
      </div>

      {/* 分割线 */}
      <hr className='border-slate-200' />

      {/* 显示CTA组件 */}
      <CTA />
    </section>
  );
};

// 导出About组件作为默认模块
export default About;